<template>
  <div>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="1">营收对账</el-menu-item>
      <el-menu-item index="2">财务报表</el-menu-item>
      <el-menu-item index="3">短信日志</el-menu-item>
    </el-menu>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import RevenueReconciliation from "@/components/function/YingshouView.vue";
import FinancialReport from "@/components/function/Caiwu.vue";
import SMSLog from "@/components/function/RizhiView.vue";

export default {
  name: 'Revenue',
  components: {
    RevenueReconciliation,
    FinancialReport,
    SMSLog
  },
  data() {
    return {
      activeIndex: '1',
      currentComponent: 'RevenueReconciliation'
    };
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      switch (key) {
        case '1':
          this.currentComponent = 'RevenueReconciliation';
          break;
        case '2':
          this.currentComponent = 'FinancialReport';
          break;
        case '3':
          this.currentComponent = 'SMSLog';
          break;
      }
    }
  }
};
</script>

<style>
</style>